<!--
 * @description: 
 * @Author: Islands
 * @Date: 2024-06-22 17:54:46
 * @LastEditTime: 2024-06-24 01:59:15
-->
<script lang="ts" setup>
import { ref } from 'vue';
import { props } from '../props';
const { data, labelWidth, constants } = defineProps(props);
import type { FormInstance } from 'element-plus';
const formRef = ref<FormInstance>();
const resetForm = () => {
    if (!formRef.value) return;
    formRef.value.resetFields();
};

defineExpose({
    resetForm
});
</script>
<template>
    <el-form ref="formRef" :inline="true" :model="data" :label-width="labelWidth" class="custom-form">
        <template v-for="item in constants">
            <el-form-item v-if="item.mode == 'input'" :label="item.label" :prop="item.prop">
                <el-input v-model="data[item.prop]" :placeholder="item.placeholder" :clearable="item.clearable" :style="{ width: item.width }" />
            </el-form-item>
            <el-form-item v-if="item.mode == 'select'" :label="item.label" :prop="item.prop">
                <el-select-v2 v-model="data[item.prop]" :options="item.options" :placeholder="item.placeholder" :style="{ width: item.width }" />
            </el-form-item>
        </template>
    </el-form>
</template>
